<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="店铺授权" top="5vh" :visible.sync="dialogVisible" @close="resetForm()" width="50%">
        <div v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="font_14 color_01">授权示例图<span class="color_03"></span></div>
            <div class="font_14 color_02" style="margin-top:10px">请勾选相应广告账户权限</div>
            <div class="shouquan_img">
                <img src="../../assets/img/tiktok_shop.jpg" alt="" style="width:100%">
            </div>
            <div class="font_14 color_01" style="margin:10px 0">授权链接</div>
            <!-- <div class="url_link" @click="copy(url)" v-if="url">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g id="&#229;&#155;&#190;&#230;&#160;&#135;/&#229;&#164;&#141;&#229;&#136;&#182;/&#228;&#184;&#139;&#230;&#139;&#137;&#229;&#136;&#151;&#232;&#161;&#168;/20">
                        <path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M5.50001 3.19995C5.05818 3.19995 4.70001 3.55812 4.70001 3.99995V6.19995H3.00001C2.55818 6.19995 2.20001 6.55812 2.20001 6.99995V17C2.20001 17.4418 2.55818 17.8 3.00001 17.8H13C13.4418 17.8 13.8 17.4418 13.8 17V15.3H16C16.4418 15.3 16.8 14.9418 16.8 14.5V3.99995C16.8 3.55812 16.4418 3.19995 16 3.19995H5.50001ZM13.8 13.7H15.2V4.79995H6.30001V6.19995H13C13.4418 6.19995 13.8 6.55812 13.8 6.99995V13.7ZM5.50001 7.79995H3.80001V16.2H12.2V14.5V7.79995H5.50001Z" fill="#4475ff" />
                        <rect id="Rectangle 240" x="5" y="10" width="6" height="1.6" rx="0.2" fill="#4475ff" />
                        <path id="Rectangle 241" d="M5 13.2C5 13.0895 5.08954 13 5.2 13L8.8 13C8.91046 13 9 13.0895 9 13.2V14.4C9 14.5105 8.91046 14.6 8.8 14.6H5.2C5.08954 14.6 5 14.5105 5 14.4V13.2Z" fill="#4475ff" />
                    </g>
                </svg>
                复制授权链接
            </div> -->
            <a :href="url" class="url_link" target="_blank" v-if="url">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g id="&#229;&#155;&#190;&#230;&#160;&#135;/&#229;&#164;&#141;&#229;&#136;&#182;/&#228;&#184;&#139;&#230;&#139;&#137;&#229;&#136;&#151;&#232;&#161;&#168;/20">
                        <path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M5.50001 3.19995C5.05818 3.19995 4.70001 3.55812 4.70001 3.99995V6.19995H3.00001C2.55818 6.19995 2.20001 6.55812 2.20001 6.99995V17C2.20001 17.4418 2.55818 17.8 3.00001 17.8H13C13.4418 17.8 13.8 17.4418 13.8 17V15.3H16C16.4418 15.3 16.8 14.9418 16.8 14.5V3.99995C16.8 3.55812 16.4418 3.19995 16 3.19995H5.50001ZM13.8 13.7H15.2V4.79995H6.30001V6.19995H13C13.4418 6.19995 13.8 6.55812 13.8 6.99995V13.7ZM5.50001 7.79995H3.80001V16.2H12.2V14.5V7.79995H5.50001Z" fill="#4475ff" />
                        <rect id="Rectangle 240" x="5" y="10" width="6" height="1.6" rx="0.2" fill="#4475ff" />
                        <path id="Rectangle 241" d="M5 13.2C5 13.0895 5.08954 13 5.2 13L8.8 13C8.91046 13 9 13.0895 9 13.2V14.4C9 14.5105 8.91046 14.6 8.8 14.6H5.2C5.08954 14.6 5 14.5105 5 14.4V13.2Z" fill="#4475ff" />
                    </g>
                </svg>
                跳转授权链接
            </a>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="resetForm()" class="el-button-width">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            url: "",
            loading:false,
            dialogVisible: false,
        };
    },
    created() {},
    methods: {
        openViewImg() {
            this.$refs.view_img.getData();
        },
        //获取授权链接
        async getDataList() {
            this.loading = true
            const { data: res } = await this.$http.post(
                this.$tiktokUrl + "qcadmin/Tiktokaccount/grantAuthorization"
            );
            if (res.code !== 200) {
                this.loading = false
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false
                this.url = res.data.url;
            }
        },

        // 复制
        copy(text) {
            let url = text;
            let oInput = document.createElement("input");
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message({
                message: "复制成功",
                type: "success",
            });
            oInput.remove();
        },

        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
            this.url=""
        },
    },
    components: {},
};
</script>


<style scoped>
.shouquan_img {
    border: 1px solid #ebebeb;
    border-radius: 6px;
    padding: 20px;
    margin-top: 12px;
}
.url_link{
    display: inline-block;
    height: 32px;
    padding: 0 12px;
    background-color: rgba(165, 177, 209, 0.10);
    border-radius: 6px;
    cursor: pointer;
    color: #4475ff;
    text-decoration: none;
}
.url_link svg{
    position: relative;
    top: 5px;
}
</style>
